<template>
  <div>
    <div>
      <van-nav-bar>
        <template #right>
          <div @click="tijiao()">提交</div>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="20" @click="pod()" />
        </template>
        <template #title>
          <div>发布{{ ask }}</div>
        </template>
      </van-nav-bar>
    </div>
    <!-- 文本域 -->
    <div>
      <van-cell-group>
        <van-field v-model="value" placeholder="请输入标题(10-30字之间)" />
      </van-cell-group>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        class="wyu1"
        placeholder="请描述商品的转手原因,入手渠道和使用感觉"
      >
      </textarea>
      <van-uploader v-model="fileList" multiple class="tup" />
    </div>
    <!-- 下面所有要求的 -->
    <div>
      <van-field v-model="text1" label="价格(必填)" placeholder="￥0"/>
      <van-field v-model="text2" label="入手价" placeholder="￥0"  v-show="this.ask === '出售'?true:false"/>
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span>运费</span>
        </template>
        <template right-icon>
          <span>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="包邮">包邮</van-radio>
              <van-radio name="自理">自理</van-radio>
            </van-radio-group>
          </span>
        </template>
      </van-cell>
    </div>
    <div>
      <van-field
        readonly
        clickable
        label="分类(必选)"
        :value="value1"
        placeholder="选择商品分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        label="新旧程度(必选)"
        :value="value2"
        placeholder="选择商品新旧程度"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @cancel="showPicker1 = false"
          @confirm="onConfirm1"
        />
      </van-popup>
    </div>
    <div>
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span>交易方式(必选)</span>
        </template>
        <template right-icon>
          <span>
            <van-checkbox-group v-model="result" direction="horizontal">
              <van-checkbox name="同城面交">同城面交</van-checkbox>
              <van-checkbox name="自提">自提</van-checkbox>
              <van-checkbox name="邮寄">邮寄</van-checkbox>
            </van-checkbox-group>
          </span>
        </template>
      </van-cell>
      <van-field v-model="text" label="联系方式" placeholder="请输入联系方式"/>
    </div>
    <div>
<van-divider>温馨提示</van-divider>
  <div class="ajj">1.为营造公平诚信的交易环境,请您在发布时务必填写真实,准确的内容。</div>
  <div class="ajj">2.对于恶意欺诈、乱发图片信息等不良行为，轻者删帖，重者封号，请大家珍惜自己的账号,共同维护良好的二手交易秩序。</div>
    </div>
  </div>
</template>
<script>
let cs = '';
import axios from 'axios'
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(from);
    cs = from.fullPath;
    next();
  },
  data() {
    return {
      ask: this.$route.query.ku,
      ask1: this.$route.query.op,
      value: '',
      value1: '',
      value2: '',
      fileList: [],
      text1: '',
      text2: '',
      text: '',
      showPicker: false,
      showPicker1: false,
      columns: [
        '鱼竿',
        '钓箱鱼护',
        '抄网支架',
        '鱼线',
        '浮漂',
        '鱼钩',
        '夜钓灯',
        '打包/整套',
        '其他',
      ],
      columns1: [
        '全新',
        '九九新',
        '九成新',
        '八成新',
        '七成新',
        '六成新',
        '其他',
      ],
      radio: '',
      result:[],
      result1:[],
    };
  },
  methods: {
    //   跳转
    pod() {
      this.$router.push({
        path: cs,
      });
    },
    // 选择器1
    onConfirm(value1) {
      this.value1 = value1;
      this.showPicker = false;
    },
    // 选择器2
    onConfirm1(value2) {
      this.value2 = value2;
      this.showPicker1 = false;
    },
    tijiao(){
        axios.post('/api/cused/add',{},{
            params:{
                cargo:this.value1,
                usertype:this.ask1,
                summary:this.value,
                phone:this.text,
              damtype:this.value2,
              price:this.text1,
              picture:this.fileList,
              changetype:this.result

            }
        }).then(res =>{
            console.log(res)
        })
    }
  },
};
</script>
<style scoped>
.wyu1 {
  width: 100%;
  border: white 0;
}
.tup {
  position: relative;
  left: 1rem;
}
.ajj{
  font-size: 1.3rem;
  color: gray;
  margin-top: 1rem;
  margin-left: 1rem;
}
</style>